%section
  %a.scroll-target{name: 'typography__styles'}
  %h3.color-black Style class helpers
  %p Silent class helpers that you can @extend in a Sass file.

  .panel.panel--padded
    - [3, 4, 7].each do |s|
      %p{class: "font-n#{s}"} The quick brown fox jumps over the lazy dog.
      %code
        = "@extend %font-n#{s};"

      %p{class: "font-i#{s}"} The quick brown fox jumps over the lazy dog.
      %code
        = "@extend %font-i#{s};"
